<template>
  <div class="echarts-ring-container">
    <!-- 顶部 -->
    <div class="top-title">
      <!-- 左侧标题区域 -->
      <div class="title-area">
        <img :src="lefticon" class="icon" />
        <span class="chart-title">{{ chartTitle }}</span>
      </div>
      <!-- 右侧下拉区域 -->
      <div class="dropdown-area">
        <el-select
          v-model="selectedTimeRange"
          placeholder="请选择"
          @change="handleTimeRangeChange"
        >
          <el-option
            v-for="(item, index) in timeRangeOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <!-- ECharts 容器 -->
    <div ref="echartsDom" class="echarts-box" />
  </div>
</template>

<script setup>
  import { ref, onMounted, watch, nextTick } from 'vue'
  import * as echarts from 'echarts'
  import { ElSelect, ElOption } from 'element-plus'
  import 'element-plus/dist/index.css' // 若使用 Element Plus 组件，需引入其样式
  import pieimage from '@/assets/operation/pieicon.png'
  import lefticon from '@/assets/operation/lefticon.png'
  const props = defineProps({
    // 环形图标题
    chartTitle: {
      type: String,
      default: '状态统计'
    },
    // 标题左侧小图标背景色
    titleIconColor: {
      type: String,
      default: '#409eff'
    },
    // 下拉选项数据
    timeRangeOptions: {
      type: Array,
      default: () => [
        { label: '本周', value: 'week' },
        { label: '本月', value: 'month' },
        { label: '本年', value: 'year' }
      ]
    },
    // 不同时间范围的数据
    chartDatasets: {
      type: Array,
      default: () => [
        {
          total: 1259,
          legendData: [
            { name: '待审批', value: 1238, color: '#4d6ef2' },
            { name: '待放行', value: 1380, color: '#6fcf97' },
            { name: '申请放行', value: 180, color: '#f9c851' },
            { name: '待上报', value: 1080, color: '#56cfe1' },
            { name: '已完成', value: 980, color: '#bb9af7' }
          ],
          seriesData: [1238, 1380, 180, 1080, 980]
        }
      ]
    }
  })

  const emit = defineEmits(['data-change'])

  const echartsDom = ref(null)
  let myChart = null
  const selectedTimeRange = ref(props.timeRangeOptions[0].value)
  const currentChartData = ref(props.chartDatasets[0])

  onMounted(() => {
    initEcharts()
  })

  watch(
    () => props.chartDatasets,
    () => {
      // 若数据源变化，重新初始化图表（可根据实际做更细粒度更新）
      initEcharts()
    }
  )
  // const image = ref(pieimage)
  // 初始化 ECharts
  const initEcharts = () => {
    console.log('图片资源:', pieimage)
    if (echartsDom.value) {
      myChart = echarts.init(echartsDom.value)
      // 定义各个扇形的渐变颜色
      // const gradients = currentChartData.value.legendData.map((item, index) => {
      //   // 线性渐变，这里设置为从外到内的径向渐变，可根据需求调整
      //   return new echarts.graphic.RadialGradient(0, 0, 4, [
      //     { offset: 0, color: item.color },
      //     { offset: 1, color: item.color + '33' } // 渐变到带透明度的同色系，营造渐变效果
      //   ])
      // })
      const option = {
        title: {
          text: '',
          left: 'center',
          top: '40%',
          textStyle: {
            fontSize: 16,
            fontWeight: 'bold',
            color: '#333'
          }
        },
        // 新增：图形元素配置（用于添加图片和文字）
        graphic: {
          elements: [
            {
              type: 'image',
              z: 10, // 层级，确保在环形上方显示
              style: {
                image: pieimage, // 本地路径如 require('@/assets/your-image.png')，在线地址直接写 URL
                width: 110, // 图片宽度，根据环形大小调整
                height: 110, // 图片高度，根据环形大小调整
                x: -142, // 图片宽度的一半（使中心点对齐）
                y: -42
              },
              // 图片位置，设置为环形中心
              left: '50%',
              top: '50%',
              origin: ['50%', '50%'] // 锚点，基于中心定位
            },
            // 中间图片配置
            // {
            //   type: 'image',
            //   // 图片位置（基于环形图中心定位）
            //   left: '15%',
            //   top: 'center',
            //   // 图片大小
            //   width: 100,
            //   height: 100,
            //   // 图片路径（替换为你的图片URL）
            //   image: image, // 示例图片，实际项目中替换为你的图片地址
            //   // 图片偏移量（微调位置，使图片完全居中）
            //   position: ['50%', '50%'],
            //   style: {
            //     x: -50, // 图片宽度的一半（使中心点对齐）
            //     y: -50 // 图片高度的一半（使中心点对齐）
            //   },
            //   z: 100
            // },
            // 图片下方的文字配置
            {
              type: 'text',
              // 文字位置（在图片下方）
              left: '22%',
              top: '55%',
              style: {
                text: '总计 ( 条 )', // 文字内容
                fontSize: 14,
                fontWeight: 'bold',
                fill: '#666666', // 文字颜色
                y: 40 // 文字在图片下方40px处
              }
            },
            // 总计数值配置
            {
              type: 'text',
              left: '24%',
              top: '35%',
              style: {
                text: currentChartData.value.total.toString(), // 数值内容
                fontSize: 24,
                fontWeight: 'bolder',
                fill: '#000000',
                y: 80 // 在"总计"文字下方
              }
            }
          ]
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          data: currentChartData.value.legendData,
          show: true,
          type: 'plain',
          //   left: 'right',
          right: '8%',
          top: 'middle',
          width: 100,
          itemGap: 20,
          // 设置图例图标为圆圈
          icon: 'circle',
          // 可以设置圆圈的大小
          symbolSize: 8,
          textStyle: {
            fontSize: 15, // 字体大小15px
            rich: {
              // 定义富文本样式
              name: {
                width: 60, // 固定宽度60px
                display: 'inline-block'
              },
              value: {
                marginLeft: 5 // 值与名称之间的间距
              }
            }
          },
          // 自定义图例格式化
          formatter: function (name) {
            // 找到对应的数据项
            const item = currentChartData.value.legendData.find(
              (d) => d.name === name
            )
            // 返回包含颜色方块、名称和值的HTML字符串
            return `{name|${name}}{value|${item.value}}`
          }
        },
        series: [
          {
            name: props.chartTitle,
            type: 'pie',
            radius: ['75%', '90%'], // 环形图内外半径
            padAngle: 5,
            center: ['30%', '50%'], // 左侧对齐关键配置
            color: currentChartData.value.legendData.map((item) => item.color),
            data: currentChartData.value.seriesData.map((val, index) => ({
              value: val,
              name: currentChartData.value.legendData[index].name
            })),
            // data: currentChartData.value.legendData.map((item, index) => ({
            //   value: item.value,
            //   name: item.label,
            //   itemStyle: {
            //     color: gradients[index]
            //   }
            // })),
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        ]
      }
      myChart.setOption(option)
      // 监听容器大小变化，自适应图表
      window.addEventListener('resize', () => {
        if (myChart) {
          myChart.resize()
        }
      })
    }
  }

  // 处理时间范围切换
  const handleTimeRangeChange = (value) => {
    const targetDataset = props.chartDatasets.find(
      (item, index) => props.timeRangeOptions[index].value === value
    )
    if (targetDataset) {
      currentChartData.value = targetDataset
      // 更新图表
      if (myChart) {
        myChart.setOption({
          title: {
            formatter: `{total|${targetDataset.total}} {unit|(条)}`
          },
          series: [
            {
              color: targetDataset.legendData.map((item) => item.color),
              data: targetDataset.seriesData.map((val, index) => ({
                value: val,
                name: targetDataset.legendData[index].name
              }))
            }
          ]
        })
      }
      emit('data-change', targetDataset) // 可向外触发数据变化事件
    }
  }

  // 使响应式数据更新后图表能正确重绘（结合 Vue3 响应式原理）
  watch(currentChartData, () => {
    nextTick(() => {
      if (myChart) {
        myChart.setOption({
          title: {
            formatter: `{total|${currentChartData.value.total}} {unit|(条)}`
          },
          series: [
            {
              color: currentChartData.value.legendData.map(
                (item) => item.color
              ),
              data: currentChartData.value.seriesData.map((val, index) => ({
                value: val,
                name: currentChartData.value.legendData[index].name
              }))
            }
          ]
        })
      }
    })
  })
</script>

<style scoped>
  .echarts-ring-container {
    width: 100%;
    height: 100%;
    padding: 13px;
    display: flex;
    flex-direction: column;
  }
  .top-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .title-area {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .icon {
    margin-right: 6px;
    width: 5px;
    height: 15px;
    background: linear-gradient(90deg, #3d7fff 0%, #81b4ff 100%);
    border-radius: 0px 0px 0px 0px;
    opacity: 0.56;
  }
  .chart-title {
    font-weight: 600;
    font-family: 'Alibaba PuHuiTi 2', 'Alibaba PuHuiTi 2.0';
    font-weight: normal;
    font-size: 16px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    color: #22262f;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .dropdown-area {
    align-self: flex-end;
    margin-bottom: 10px;
  }
  .echarts-box {
    width: 100%;
    height: 240px;
    margin-bottom: 10px;
  }
  .data-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .data-item {
    display: flex;
    align-items: center;
  }
  .data-type {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
  }
  .data-text {
    color: #666;
  }
  :deep(.el-select__wrapper) {
    width: 67px;
    height: 28px;
    padding: 2px !important;
    background: linear-gradient(90deg, #158dff 0%, #4caaff 100%);
    font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
    font-weight: normal;
    font-size: 14px;
    color: #ffffff !important;
    text-align: left;
    font-style: normal;
    text-transform: none;
    border-radius: 6px !important;
    box-shadow: none;
  }
  :deep(.el-select__placeholder) {
    color: #ffffff !important;
    padding-left: 6px;
  }
  :deep(.el-select__caret) {
    color: #ffffff !important;
    padding-right: 4px;
  }
</style>
